<div style="padding-top: 15px; padding-bottom: 15px;">
	<div class="container">
		<a routerLink="/learn" class="btn btn-outline-dark" style="margin-top: 5px;">Back</a>
		<h2>Post-Processing</h2>
		<p>In this guide we will learn how to use postprocessing effects inside of nunuStudio, postprocessing effects are applied after the base image was rendered. These effects can be used to give a totally different atmosphere to a scene.</p>
		<p>The Post-processing pipeline is composed of a series of steps used to produce the final image, each step is performed by order (changing its order produces a different results). The pipeline is attached to the camera object.</p>
		<p>To open the postprocessing pipeline editor double click the camera object on the explorer.</p>
		<p>Each postprocessing step has its own custom set of attributes that can be adjusted in the editor and during runtime. Post-processing steps can be enabled/disabled and used as an output for the final image. </p>

		<img src="assets/learn/basics/postprocessing/editor.png" class="img-normal"/>

		<app-viewer fname="assets/learn/basics/postprocessing/blur.nsp"></app-viewer>

		<h3>Custom effects</h3>
		<p>It is possible to create custom postprocessing effects using GLSL shaders. This can be achieved using a script object that creates a custom shader pass and attaches is to the camera object as shown bellow.</p>
		<p>The programmer has to be carefull and manage its own uniform values passed to the shader. If the effects craeted need to render to the screen dont forget to set the renderToScreen variable true.</p>
<pre><code class="hljs javascript">include("SepiaShader.js");

function initialize()
{{'{'}}
camera = scene.getObjectByName("camera");

//custom shader pass
var effect =
{{'{'}}
uniforms:
	{{'{'}}
		"tDiffuse": {{'{'}} value: null {{'}'}},
		"amount":   {{'{'}} value: 1.0 {{'}'}}
	{{'}'}},
	vertexShader: [
		"varying vec2 vUv;",
		"void main() {{'{'}}",
			"vUv = uv;",
			"gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
		"{{'}'}}"
	].join("\n"),
	fragmentShader: [
		"uniform float amount;",
		"uniform sampler2D tDiffuse;",
		"varying vec2 vUv;",
		"void main() {{'{'}}",
			"vec4 color = texture2D(tDiffuse, vUv);",
			"vec3 c = color.rgb;",
			"color.r = c.r * 2.0;",
			"color.g = c.g / 1.2;",
			"color.b = c.b;",
			"gl_FragColor = vec4(color.rgb , color.a);",
		"{{'}'}}"
	].join("\n")
{{'}'}}

camera.composer.passes[0].renderToScreen = false;

var sepia = new ShaderPass(THREE.SepiaShader);
camera.composer.addPass(sepia);
sepia.renderToScreen = true;
{{'}'}}</code></pre>

		<app-viewer fname="assets/learn/basics/postprocessing/sepia.nsp"></app-viewer>
	</div>
</div>
